// Page layout can be done using mixins applied to your semantic classes and IDs
// For instance this layout defines a two column layout on pages with
// a body id of "zinnia".
//
// The markup would look like:
//    <div class="container">
//      <div id="header"></div>
//      <div id="content"></div>
//      <div id="sidebar"></div>
//      <div id="footer"></div>
//    </div>
//
// and the layout would look like:
//    +------------------------+
//    |        #header         |
//    +---------------+--------+
//    |               |        |
//    |   #content    |#sidebar|
//    |               |        |
//    +------------------------+
//    |        #footer         |
//    +------------------------+

& {
  .container {
    @include container;
    @include susy-grid-background;
  }
  #header, #footer {
    @include full;
  }
  $third: floor($total-cols / 3);
  #content {
    @include columns(2 * $third);
    @include alpha;
  }
  #sidebar {
    @include columns($third);
    @include omega;
  }
  @media (max-width: 650px) {
    #content, #sidebar {
      @include full;
      @include columns($total-cols);
    }
  }
}
